<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
const titleDemo = ref(null)
onMounted(() => {
  const demo = document.getElementById('#demo')
  const titleEcharts = echarts.init(titleDemo.value)
  const option = {
    title: {
      text: `衣服销量-{bold|5月}`,
      textStyle: {
        rich: {
          bold: {
            fontWeight: '900',
            fontSize: 30
          }
        }
      }
    },
    tooltip: {
      show: true, // 控制显示
      trigger: 'axis', //item图形时触发, axis点击坐标轴时触发
      axisPointer: {
        type: 'cross', // 坐标轴指示器,默认是shadow在柱状形中,none没有,cross十字形,shadow阴影,line竖线
        axis: 'x', // 指示器的坐标轴
        snap: true, // 自动吸附
        z: 2, // 呈现顺序
        label: {
          // 坐标轴指示器的文字显示
          show: true,
          precision: 5, // 精度控制
          // formatter: (params) => {
          //   if (params.axisDimension === 'y') {
          //     return params.value.toFixed(2)
          //   }
          // } // 使用自定义,params是坐标轴相关信息,有坐标维度以及坐标值,
          // seriesData存放着series相关信息
          margin: 20, // 与轴的距离
          color: 'black', // 颜色
          fontStyle: 'normal', // 字体设置
          fontWeight: '500',
          fontFamily: 'Arial',
          fontSize: 20,
          width: 60, // 文字长宽设置
          height: 20,
          lineHeight: 20,
          textBorderWidth: 2, // 设置文字周边携带效果
          textBorderType: 'solid', // 数组是指虚线实线循环效果
          // textBorderDashOffset: 5, // 整个虚线图案的偏移量
          textBorderColor: 'red',
          textShadowColor: 'green', // 设置文字的阴影效果
          textShadowBlur: 5,
          textShadowOffsetX: 5,
          textShadowOffsetY: 5,
          overflow: 'truncate',
          ellipsis: '...',
          padding: 5, // 内边距
          backgroundColor: '#fff', // 背景色
          borderColor: 'black', // 边框
          borderWidth: 2,
          shadowBlur: 4, // 文字块背景
          shadowColor: 'green',
          shadowOffsetY: 2,
          shadowOffsetX: 3
        },
        lineStyle: {
          // 线的样式设置,只有type为line时有效
          color: 'purple', //颜色
          width: 2, //宽度
          type: 'dashed', // 类型
          dashOffset: 2, // 这里只能是数字
          cap: 'butt', // 线的末尾
          join: 'miter', // 线的连接处有拐角设置,在折线图设置
          miterLimit: 100, // 拐角长度设置
          shadowBlur: 5, // 线阴影设置
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowOffsetX: 2,
          shadowOffsetY: 2,
          opacity: 0.3 // 透明度设置
        },
        shadowStyle: {
          // 当type为shadow时有效
          color: 'pink', // 颜色
          opacity: 0.4, // 透明度
          shadowBlur: 5, // 线阴影设置
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        },
        crossStyle: {
          // 当type为cross时有效,与linestyle一样
          // 线的样式设置,只有type为line时有效
          color: 'purple', //线的颜色
          width: 2, //宽度
          type: 'dashed', // 类型
          dashOffset: 2, // 这里只能是数字
          cap: 'butt', // 线的末尾
          join: 'miter', // 线的连接处有拐角设置,在折线图设置
          miterLimit: 100, // 拐角长度设置
          shadowBlur: 5, // 线阴影设置
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowOffsetX: 2,
          shadowOffsetY: 2,
          opacity: 0.3 // 透明度设置
        },
        // 动画设置
        animation: true, // 开启动画
        animationThreshold: 2000, // 动画阈值
        animationDuration: 1000, // 动画时长
        animationEasing: 'bounceOut', // 速度类型
        animationDelay: 1000, // 动画延迟
        animationDurationUpdate: 3000, //更新时长
        animationEasingUpdate: 'quadraticOut',
        animationDelayUpdate: 1000
      },
      showContent: true, // 显示文本
      alwaysShowContent: false, // 提示框是否总是显示
      triggerOn: 'mousemove', //'鼠标触发方式'
      showDelay: 100, // 显示与隐藏延迟
      hideDelay: 200,
      enterable: true, // 鼠标是否可进入提示框浮层,默认是不可以的,有操作时可以
      // renderMode: 'html', // 渲染模式,formatter可以存放html内容,也可以是富文本
      // formatter:
      //   '<div style="color: red; font-weight: bold;">自定义HTML提示框自定义HTML提示框</div>',
      confine: true, //将提示框左侧限制在容器中
      valueFormatter: (value) => {
        console.log(value.toFixed(3))
        return value.toFixed(3)
      }, // 针对原始的value做格式化
      transitionDuration: 0.4, // 提示框的过渡时间,
      displayTransition: true, // 开启动画
      // appendToBody: true // 将这个提示框挂载到body上,当formatter为html时有效
      appendTo: demo, // 将这个提示框附加到其他组件
      // 给提示框增加额外样式
      // extraCssText: `
      //   border-radius: 8px !important;
      //   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      //   background-color: rgba(255, 255, 255, 0.95) !important;
      //   padding: 12px !important;`,
      position: [10, 10], // 提示框位置
      backgroundColor: '#fff',
      borderColor: 'red',
      borderWidth: 2,
      order: 'seriesDesc', // 出现多个时的做法
      textStyle: {
        // 与之前的title的textStyle一样
        fontStyle: 'italic',
        fontWeight: '900',
        fontFamily: 'Microsoft YaHei',
        fontSize: 16,
        textBorderColor: '#ffcc00', // 文字描边颜色（黄色）
        textBorderWidth: 8, // 文字描边宽度（2px）
        textBorderType: 'solid', // 描边类型（实线）
        textShadowColor: 'green',
        textShadowBlur: 5,
        textShadowOffsetX: 0,
        textShadowOffsetY: 0
      }
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      type: 'category'
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  }
  titleEcharts.setOption(option)
})
</script>
<template>
  <div id="demo">
    <div ref="titleDemo" class="title-demo"></div>
  </div>
</template>
<style lang="scss" scoped>
.title-demo {
  width: 500px;
  height: 500px;
  background-color: lightblue;
}
</style>
